{% extends '@Default/layout.twig' %}


{% block content %}

    <h2>
    	<i class="fa fa-cubes right-padding-5"></i> Details of {{ project.getName() }}
    </h2>


    <div class="panel panel-white panel-animated">
        <div class="panel-heading">
            <h3 class="panel-title">Project Details</h3>
        </div>
        <div class="panel-body">

			<div class="panel-options">
		        <a class="btn btn-md btn-default" href="{{ app.urlFor('Projects-Project-List') }}">
		            <i class="fa fa-arrow-circle-left"></i>
		            Back
		        </a>
		    </div>
			
			<div class="col-sm-12 col-md-6">
				<label>Customer</label>
	            <p>
	            	<a href="{{ app.urlFor('Customers-Customer-Edit',{id:project.getCustomer().getId()}) }}">
	                    {{ project.getCustomer().getName() }} - {{ project.getCustomer().getNickname() }}
	                </a>
	            </p>
	
	            <label>Description</label>
	            <p>{{ project.getShortDescription() }}</p>	
			</div>
            
			<div class="col-sm-12 col-md-6">
	            <label>Total Amount</label> 
	            <p>${{ project.getTotalCost()|number_format(2, '.', ',') }}</p>
	            
	            
	            <label>Total Paid</label>
	            <p>${{ project.getTotalPaid()|number_format(2, '.', ',') }}</p>
           	</div>
        </div>
    </div>


    <div class="panel panel-white panel-animated">
        <div class="panel-heading">
            <h3 class="panel-title">Products</h3>
        </div>
        <div class="panel-body">

            <div class="panel-options">
                <a class="btn btn-md btn-info"
                   href="{{ app.urlFor('Projects-Product-Create',{projectId:project.getId()}) }}">
                    <i class="fa fa-plus-circle right-padding-5"></i> Add Product
                </a>
            </div>

            <br>

            <table class="table" id="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th>Estimated Hours</th>
                    <th>Is it Paid?</th>
                    <th>Options</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in list %}
                    <tr>
                        <td>
                            <a href="#" data-toggle="modal" data-target="#product{{ obj.getId() }}">
                                {{ obj.getName() }}
                            </a>
                        </td>
                        <td>$ {{ obj.getValue()|number_format(2, '.', ',') }}</td>
                        <td>{{ obj.getEstimatedhours()|number_format(0, '.', ',') }}</td>
                        <td>{% if obj.getPaid() %}Yes{% else %}No{% endif %}</td>
                        <td>
                            <a class="btn btn-info" href="{{ app.urlFor('Projects-Product-Edit', {'projectId':project.getId(),'id':obj.getId()}) }}">Edit</a>
                            <a class="btn btn-danger" href="{{ app.urlFor('Projects-Product-Delete', {'projectId':project.getId(),'id':obj.getId()}) }}">Delete</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

        </div>
    </div>

    {% for obj in list %}
        <div id="product{{ obj.getId() }}" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Product Details</h4>
                    </div>
                    <div class="modal-body">

						{% if obj.getPaid() %}
							<p class="alert alert-success">
								Paid
							</p>
						{% else %}
							<p class="alert alert-danger">
								Not Paid
							</p>
						{% endif %}

                        <div class="row" style="padding:10px;">
                            <div class="col-md-6 col-sm-6">
                                <h4>Name</h4>
                                <p>{{ obj.getName() }}</p>

                                <br>

                                <h4>Estimated Hours</h4>
                                <p>{{ obj.getEstimatedHours() }}</p>

                                <br>

                            </div>

                            <div class="col-md-6 col-sm-6">
                                <h4>Project</h4>
                                <p>{{ obj.getProject().getName() }}</p>

                                <br>

                                <h4>Description</h4>
                                <p>{{ obj.getDescription() }}</p>
                            </div>
                        </div>
                        
                        <div class="row" style="padding:10px;">    
                            
                            <div class="col-md-6 col-sm-6">
                                <h4>Total Hours Worked</h4>
                                <p>{{ obj.getTotalHoursWorked() }} hours</p>
                            </div>
                            
                            <div class="col-md-6 col-sm-6">
                                <h4>Value</h4>
                                <p>$ {{ obj.getValue() }}</p>
                            </div>
                         </div>
                         
                         <div class="row" style="padding:10px;">   
                            <div class="col-md-12 col-sm-12">
                            	<h4>Allocations</h4>
                            
                                 {{ allocationTables[obj.getId()].renderTable()|raw }}                                 	
                            </div>
                        </div>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    {% endfor %}


    <script type="text/javascript">
        jQuery( document ).ready( function( $ ) {
            var $table = jQuery( "#table" );
            $table.DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', {
                        extend: 'pdfHtml5',
                        title: 'Products of {{ project.getName() }}',
                        text: 'PDF'
                    }
                ]
            } );
        } );
    </script>

{% endblock %}